<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>

    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function () {
            var randomWordId;
            // 用于存储选项id
            var chooseIdArr= [];
            // 资源准备
            $.ajax({
                url: [[@{/word/getCount}]],
                method: "GET",
                dataType: "json",
                success: function (resp) {
                    var wordCount = resp.data;
                    randomWordId = Math.floor(Math.random() * wordCount) + 1;
                    console.info(randomWordId)
                    // 获得单词
                    $.ajax({
                        url: [[@{/word/getEn}]],
                        data: {id:randomWordId},
                        method:"GET",
                        dataType: "json",
                        success: function (resp) {
                            console.info(resp)
                            $("#word").text(resp.data);
                        },
                        error: function () {
                            console.log("请求错误");
                        }
                    });
                    // 获得选项
                    $.ajax({
                        url: [[@{/word/getChoose}]],
                        data: {id:randomWordId},
                        method: "get",
                        dataType: "json",
                        success: function(resp) {
                            var wordArr = resp.data;
                            $.each(wordArr,function(index,value) {
                                // console.info(value)
                                chooseIdArr.push(value.id)
                                var chooseId = "#choose"+(index+1);
                                $(chooseId).text(value.type+" "+value.ch)
                            })
                        },
                        error: function() {
                            console.info("选项获取出现问题");
                        }
                    });

                },
                error: function() {
                    console.info("请求失败")
                }
            });
            // console.info(chooseIdArr)

            // 判断答案是否正确
            $(document).ready(function(){
                $("#choose1").click(function(){
                    // $.ajax({
                    //     url:[[@{/word/checkAnswer}]],
                    //     method:"GET",
                    //     dataType:"json",
                    //     data:{
                    //         exactId:randomWordId,
                    //         chooseId:$(chooseIdArr[0]).val()
                    //     },
                    //     success:function (resp) {
                    //         var checkFlag = resp.data;
                    //         var redirectUrl = /*[[@{/index}]]*/ '';
                    //         if (checkFlag) {
                    //             $("#choose1").css("background","rgb(28, 121, 24)")
                    //
                    //             setTimeout(function() {
                    //                 window.location.href = redirectUrl;
                    //             }, 1000);
                    //         }else {
                    //             $("#choose1").css("background","rgb(28, 121, 24)")
                    //             $("#choose2").css("background","rgb(143, 13, 13)")
                    //             $("#choose3").css("background","rgb(143, 13, 13)")
                    //             setTimeout(function() {
                    //                 window.location.href = redirectUrl;
                    //             }, 1000);
                    //         }
                    //
                    //     },
                    //     error:function() {
                    //         console.info("发生错误")
                    //     }
                    //
                    // })
                    checkAnswer(chooseIdArr[0],1);
                })
                $("#choose2").click(function(){
                    checkAnswer(chooseIdArr[1],2);
                })
                $("#choose3").click(function(){
                    checkAnswer(chooseIdArr[2],3);
                })

            })
            function checkAnswer(chooseId,choose) {
                $.ajax({
                    url: [[@{/word/checkAnswer}]],
                    method: "GET",
                    dataType: "json",
                    data: {
                        exactId: randomWordId,
                        chooseId: chooseId
                    },
                    success: function (resp) {
                        var checkFlag = resp.data;
                        // 这个url是需要替换的
                        var redirectUrl = "http://127.0.0.1:8080/";
                        if (checkFlag) {
                            $("#" + "choose"+choose).css("background", "rgb(28, 121, 24)");
                        } else {
                            $("#" + "choose"+choose).css("background", "rgb(143, 13, 13)");
                        }
                        // 等待一段时间后跳转
                        setTimeout(function () {
                            window.location.href = redirectUrl;
                        }, 1000);
                    },
                    error: function () {
                        console.info("发生错误");
                    }
                });
            }

        });

        /*]]>*/
    </script>
</head>
<body>

    <div class="optionButton">
        <div class="buttons">
            <button id="del" class="del">Del</button>
            <button id="add" class="add">Add</button>
        </div>
    </div>

    <div class="container">
        <div id="word" class="wordArea">---</div>
        
        <div class="chooseArea">

            <div id="choose1" class="select">---</div>
            <div id="choose2" class="select">---</div>
            <div id="choose3" class="select">---</div>

        </div>
    </div>

</body>

</html>